import React, { useState, useEffect, useRef } from "react";
import { Form, Input, Button, Avatar, Upload, Spin, Modal, message } from "antd";
import { useAuth } from "context/auth-context";

import BHeader from "components/bHeader";

import styled from "@emotion/styled";
import Instructions from "components/instructions/index";
import { padding, borderRadius } from "config/page";
// import { UploadChangeParam, UploadFile } from "antd/lib/upload/interface";
import * as api from "api/index";
// import { User } from "context/auth-context"
export default function UserAccount() {
  const { user } = useAuth();
  const form = useRef(null);

  const [isModalVisible, setIsModalVisible] = useState(false);


  // 登录密码
  const passwordFinsh = (val: { newPassword: string; password: string; }) => {
    api
      .updatePassword({
        user_id: user?.userId,
        newPassword: val.newPassword,
        password: val.password,
      })
      .then(() => {
        message.success('修改密码成功!');
        setIsModalVisible(false);
        setTimeout(()=> {
          window.localStorage.removeItem('userAuth')
          window.location.href="/"
        }, 3000)
      });
  };


  const layout = {
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
  };

  return (
    <div>
      <BHeader title="个人中心" hideSearch={true} />
      <div style={{ padding: padding }}>
        {/* @ts-ignore */}
        <Wrapper borderRadius={borderRadius} padding={padding}>
          <Instructions title="基本信息" hideSearch={true}/>
          <div style={{ display: "flex", alignItems: "center", padding: 16 }}>
            {user?.userId ? (
              <div>
                <BaseInfo>
                  {/* <li>
                    <span>账户名</span>
                    {user.userLoginName}
                  </li> */}
                  <li>
                    <span>昵称</span>
                    {user.userName}
                  </li>
                  <li>
                    <span>邮箱</span>
                    {user.email}
                  </li>
                </BaseInfo>
                <Button
                  htmlType="submit"
                  onClick={() => setIsModalVisible(true)}
                >
                  修改登录密码
                </Button>
              </div>
            ) : (
              <Spin />
            )}

            {/* 头像 */}
            <div
              style={{
                display: "flex",
                marginLeft: "100px",
                alignItems: "center",
              }}
            >
              <Avatar  size={120}>
                {user?.userName?.substring(0, 1)}
              </Avatar>
              {/* <div style={{ marginLeft: "30px" }}>
                <Upload
                  accept=".jpg,.png,.jpeg,.gif"
                  maxCount={1}
                  method="put"
                  name="avatar"
                  headers={{ token: user?.token || "" }}
                  onChange={(val) => changeAvatarFile(val)}
                  action={"http://192.168.1.203:9101/sys/user/v2/upload/avatar"}
                >
                  <Button>上传头像</Button>
                </Upload>
                {user?.avatar_url ? (
                  <Button
                    style={{ marginTop: "20px" }}
                    type="text"
                    onClick={() => deleteAvatar()}
                  >
                    移除头像
                  </Button>
                ) : null}
              </div> */}
            </div>
          </div>
        </Wrapper>
      </div>
      <Modal
        title="重置密码"
        visible={isModalVisible}
        // @ts-ignore
        onOk={() => form.current.submit()}
        onCancel={() => setIsModalVisible(false)}
        okText="确定"
        cancelText="取消"
        maskClosable={false}
      >
        <Form {...layout} onFinish={passwordFinsh} ref={form}>
          <Form.Item
            label="初始密码"
            name="password"
            rules={[{ required: true, message: "请输入您的账号密码" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="新密码"
            name="newPassword"
            rules={[{ required: true, message: "请输入您的新密码!" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认新密码"
            name="aginPassword"
            rules={[
              {
                required: true,
                message: "Please confirm your password!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("newPassword") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("两次密码不一致！"));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

const Wrapper = styled.div`
  background-color: #fff;
  box-sizing: border-box;
  min-height: ${(props: any) => `calc(100vh - ${props.padding * 2 + 165}px)`};
  border-radius: ${(props: any) => props.borderRadius + "px"};
  height: auto;
`;

const BaseInfo = styled.ul`
  margin-bottom: 30px;
  li {
    line-height: 2;
    margin: 10px 0;
    font-size: 14px;
    span {
      display: inline-block;
      width: 70px;
      color: #999;
      margin-right: 20px;
    }
  }
`;
